<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :lock-scroll="defaultValue.lockScroll"
    :append-to-body="tableConfig.appendToBody"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.showClose"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">

    <el-form ref="formBook" :rules="rulesSoftware" :model="formSoftware" label-width="180px">
      <el-form-item label="软件名称" prop="name" >
        <el-input v-model.trim="formSoftware.name"></el-input>
      </el-form-item>
      <el-form-item label="运行平台" prop="app">
        <el-select v-model="formSoftware.app" placeholder="请选择运行平台">
          <el-option label="手机" :value="1"></el-option>
          <el-option label="小程序" :value="2"></el-option>
          <el-option label="Windows" :value="3"></el-option>
          <el-option label="苹果" :value="4"></el-option>
          <el-option label="Linux" :value="5"></el-option>
          <el-option label="其他" :value="9"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否在使用" prop="inUse">
        <el-select v-model="formSoftware.inUse" placeholder="请选择是否在使用">
          <el-option label="未使用" :value="1"></el-option>
          <el-option label="使用中" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="软件类型" prop="typeId">
        <el-select v-model="formSoftware.typeId" placeholder="请选择软件类型">
          <el-option
            v-for="item in softwareTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="本地保存地址" prop="localSaveAddress" >
        <el-input v-model.trim="formSoftware.localSaveAddress"></el-input>
      </el-form-item>
      <el-form-item label="官网下载地址" prop="officialAddress" >
        <el-input v-model.trim="formSoftware.officialAddress"></el-input>
      </el-form-item>
      <el-form-item label="评分" prop="grade" >
        <el-rate v-model="formSoftware.grade" :texts="texts" show-text></el-rate>
      </el-form-item>
      <el-form-item label="描述" prop="comment" >
        <el-input v-model.trim="formSoftware.describe" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="comment" >
        <el-input v-model.trim="formSoftware.remarks" type="textarea"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button plain type="warning" @click="toSaveUpd" v-if="defaultValue.saveUpdSelect !== 'select'">{{defaultValue.title}}</el-button>
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>

</template>

<script>
  import {clearInvalid, getFullDate} from "../../utils/utils"
  import http from '@/utils/http';

  export default {
    name: "SoftwareSaveUpd",
    data(){
      return {
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '查看',
          // 保存还是修改or查看,取值有 select | save | upd
          saveUpdSelect: 'select'
        },
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          showClose: true,
          // 下面2个属性解决打开弹出框后没有在最上面显示的问题，导致看到的内容是一半的，需要先将滚动条移到最上面
          lockScroll: false,
          appendToBody: true,
        },
        // 软件类型
        softwareTypeList: [],
        // 评价文字说明
        texts: ['非常差', '较差', '一般', '优秀', '经典'],
        // 校验规则
        rulesSoftware: {
          name: [{ required: true, message: '请输入软件名称', trigger: 'blur' }],
          grade: [{ required: true, message: '请选择评分', trigger: 'blur' }],
          app: [{ required: true, message: '请选择运行平台', trigger: 'change' }],
          inUse: [{ required: true, message: '请选择是否使用', trigger: 'change' }],
          typeId: [{ required: true, message: '请选择软件类型', trigger: 'change' }],
        },
        // 提交的数据
        formSoftware: {
          name: null,
          app: null,
          inUse: null,
          typeId: null,
          localSaveAddress: null,
          officialAddress: null,
          grade: null,
          describe: null,
          remarks: null,
        },
      }
    },
    methods: {
      /**
       * 打开弹出框之前
       * @param value 保存还是修改or查看,取值有 select \ save \ upd
       * @param obj 如果是修改和查看，则是详细数据,需要赋值
       * @param type 软件类型
       */
      openPageSoftware(value, obj, type){
        // 从外部转入，减少查询
        this.softwareTypeList = type
        this.defaultValue.saveUpdSelect = value
        this.initSoftware()

        if (value === 'save'){
          this.defaultValue.title = '保存软件'

        } else if (value === 'upd'){
          this.defaultValue.title = '修改软件'
          this.formSoftware = JSON.parse(JSON.stringify(obj))

        } else {

        }

        this.tableConfig.show = true
        this.$store.commit('navigationListChange', ['我的软件', this.defaultValue.title])
      },
      /**
       * 是保存还是修改软件
       */
      toSaveUpd(){
        if (this.defaultValue.saveUpdSelect === 'save'){
          this.saveSoftware()

        } else if (this.defaultValue.saveUpdSelect === 'upd'){
          this.updSoftware()

        } else {

        }
      },
      /**
       * 保存软件信息
       */
      saveSoftware(){
        http.post("/software/saveSoftware", this.formSoftware).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.$message.success("保存成功");
          this.$emit('getSoftwareListPage', null)
          // 关闭弹出框
          this.tableConfig.show = false

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 更新软件信息
       */
      updSoftware(){
        clearInvalid(this.formSoftware)
        http.post("/software/updSoftware", this.formSoftware).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.$message.success("修改成功");
          this.$emit('getSoftwareListPage', null)
          // 关闭弹出框
          this.tableConfig.show = false

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 初始化软件信息
       */
      initSoftware(){
        this.formSoftware = {
          name: null,
          app: null,
          inUse: null,
          typeId: null,
          localSaveAddress: null,
          officialAddress: null,
          grade: null,
          describe: null,
          remarks: null,
        }
      }
    }
  }
</script>

<style scoped>

</style>
